Blog-𝕚𝕗𝕪𝕖𝕣

A common place to get a web font is Google Fonts. If you want to use a font from Google Fonts, you should not just paste the code they give you because that would leak the IP addresses of visitors to Google.

Instead, you should download the font files and put them on your webserver.

Do not use the download button on Google Fonts becasue the download button in Google Fonts gives TTF files and not WOFF2 files. WOFF2 files are better because they are compressed and because Google Fonts subsets them.

-1. ENSURE THAT YOUR USE OF THE FONT WILL COMPLY WITH THE LICENSE
0. Download the font
   0. Go to Google Fonts and search for the font you want.
   1. Select "Get font".
   2. Select "Get embed code" (don't paste the code it gives you).
   3. Select which options you want included.
   4. In the HTML code it gives you, it should have something like <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">.
      Download the file using the URL after the href in that element (https://fonts.googleapis.com/css2?family=Fira+Code&display=swap in this case).
      Download each font referenced in the CSS file you just downloaded.
      Put all of the font you just downloaded in a folder, ideally with a something that will change each update and a long cache time (like /Assets/Fira/Code/2025-8-13/).
      Copy the CSS file into that folder.
      Change the CSS to use relative links.
      (eg change src: url(https://fonts.gstatic.com/s/firacode/v26/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2'); into src: url(uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');)
1. Paste the license of the font into a file. To find the license of a google font do:
   0. Search for the font on Google Fonts
   1. Select the font
   2. Select "License"
2. Add html to use the CSS like:

   <link href="/Assets/Fonts/Fira/Code/2025-8-13/fira-code.css" rel="preload"/>
       <link href="/Assets/Fonts/Fira/Code/2025-8-13/fira-code.css" rel="stylesheet"/>

3. Add css to use the font like:

   code {
       font-family: "Fira Code", monospace;
       font-optical-sizing: auto;
       font-weight: 400;
       font-style: normal;
       }

4. Add a link to the font LICENSE and ensure that your usage of the font follows the license of the font.